import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  ScrollView,
} from 'react-native';

import BasePage from '../common/BasePage';
import Colors from '../../common/Colors';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import ZHP_NewView from './ZHP_NewView';
import ZHP_HotView from './ZHP_HotView';
import TImage from '../../components/TImage';
import LoginCheckIsUserAction from '../../actions/login/LoginCheckIsUserAction';

const TOP_BTN_GROUP_LABELS = ["最新", "精选"];
//倾诉杂货铺主页
export default class ZHP_MainPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.btnGroupSelectedIndex = 0;
    this._scrollView = null;
    this._pageWidth = SizeUtils.getWindowSize().width;
    this._pageHeight = SizeUtils.getWindowSize().height - Config.paddingTop;
    this._clickTopBtnTimer = null;
    this.scrollEnabled = true;
  }

  render() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height,
          backgroundColor: Colors.White, paddingTop: Config.paddingTop,
          flexDirection: 'column'}}>
        { this._renderChildPage()}
        { this._renderNavigationBar()}
        { this._renderWriteButton()}
        { this._renderStatusBar() }
      </View>
    )
  }

     _dealEnterPage() {
      this.setState({
        scrollEnabled:true
      })

  }

  _renderNavigationBarTitle() {
    return (
      <View style={{flexDirection: 'row'}} >
        {this._renderTopBtnGroup()}
      </View>
    )
  }

  _renderNavigationBarRightButtonContent() {
    return (
      <View style={{height:SizeUtils.translateDesignHeightToCode(51),
          flexDirection:"row", alignItems:"center", paddingTop:SizeUtils.translateDesignHeightToCode(10)}}>
        <TImage source={require("../../../resource/images/workhard/search.png")}
          style={{width:34, height:34}}/>
      </View>
    )
  }

  _onPressNavigationBarRightBtn() {
    this.gotoPage(Config.pages.zhp_search);
  }

  _renderChildPage() {
    return(
      <ScrollView style={{width:this._pageWidth,
          height:this._pageHeight}}
        ref={(ref) => this._scrollView = ref}
        horizontal={true}   // 水平方向
        showsHorizontalScrollIndicator={false}  // 水平指示器
        showsVerticalScrollIndicator={false}    // 垂直指示器
        pagingEnabled={true}    // 开启分页功能
        alwaysBounceHorizontal={false} //弹性拉动一截
        onScroll={this._onScroll.bind(this)}
        scrollEnabled={this.state.scrollEnabled}
      >
        <ZHP_NewView home={this} style={{width:this._pageWidth,
          height:this._pageHeight}} />
        <ZHP_HotView home={this} style={{width:this._pageWidth,
          height:this._pageHeight}} />
      </ScrollView>
    )
  }

    setHorizontalDisable(){
      this.setState({
        scrollEnabled:false
      })
       // this._scrollView.scrollTo({x:this.state.btnGroupSelectedIndex * this._pageWidth});
  }

   setHorizontalEnable(){
      this.setState({
        scrollEnabled:true
      })
       // this._scrollView.scrollTo({x:this.state.btnGroupSelectedIndex * this._pageWidth});
  }


  _onScroll(event) {
    let x = event.nativeEvent.contentOffset.x;
    let index = Math.round(x / this._pageWidth);
    console.log("round", index, x / this._pageWidth, x, this._pageWidth);
    if(this.state.btnGroupSelectedIndex != index) {
      this.setState({
        btnGroupSelectedIndex:index,
      })
    }
  }

  _renderTopBtnGroup() {
    return (
      <View style={{flexDirection:"row", width:SizeUtils.translateDesignWidthToCode(180),
        justifyContent:"space-between",
        height:SizeUtils.translateDesignHeightToCode(50)}}>
        {this._getButton(0)}
        {this._getButton(1)}
      </View>
    )
  }

  _getButton(index) {
    return (
      <TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(80), flexDirection:"column",
            alignItems:"center"}}
          onPress={() => this._onPressBtnGroup(index)}>
        <Text style={{textAlign:"center", fontSize:SizeUtils.translateFontSizeToCode(36),
          height:SizeUtils.translateDesignHeightToCode(48),
          color:this.state.btnGroupSelectedIndex == index ? "#000000": "#666666",
          backgroundColor:"#00000000", borderWidth:0,}}>
          {TOP_BTN_GROUP_LABELS[index]}
        </Text>
        <View style={{borderColor:"#4581fa", borderBottomWidth:index == this.state.btnGroupSelectedIndex ? SizeUtils.translateDesignHeightToCode(5) : 0,
          width:SizeUtils.translateDesignWidthToCode(60), height:SizeUtils.translateDesignHeightToCode(20)}}>
        </View>
      </TouchableOpacity>
    )
  }

  _renderWriteButton() {
    return (
      <View style={{position:"absolute", bottom:0, right:0,
          width:SizeUtils.translateDesignWidthToCode(146),
          height:SizeUtils.translateDesignWidthToCode(146)}}>
        <TouchableOpacity onPress={this._onPressWriteButton.bind(this)}>
          <TImage source={require("../../../resource/images/workhard/fabu.png")} style={{
              width:106, height:106
          }} />
        </TouchableOpacity>
      </View>
    )
  }

  _onPressWriteButton() {
    new LoginCheckIsUserAction().call(this, {content:"你是游客身份，不能使用此功能"} , (result) => {
      if(result) {
        this.gotoPage(Config.pages.zhp_write);
      }
    })
  }

  _onShowUnderlay() {

  }

  _onPressBtnGroup(selectedIndex) {

    if(this._clickTopBtnTimer) {
      return;
    }
    this._clickTopBtnTimer = setTimeout(() => {
      this._clearClickTopBtnTimer();
    }, 300);
    this._scrollView.scrollTo({x:selectedIndex * this._pageWidth});
  }

  _clearClickTopBtnTimer() {
    this._clickTopBtnTimer && clearTimeout(this._clickTopBtnTimer)
    this._clickTopBtnTimer = null;
  }
}
